<template>
    <template v-for="(secItem,secIndex) in subMenuData" :key="secIndex">
        <template v-if="typeof secItem.secMenu != 'undefined' && secItem.secMenu.length != 0 && !collapse">
            <el-sub-menu :index="splitPath(secItem.path)">
                <template #title>
                    <!--<component
                        :is="secItem.sideBarIconName"
                        style="width: 1.3em; height: 1.3em; margin-right: 6px;">
                    </component>-->
                    <span v-if="!collapse">{{secItem.sideBarName}}</span>
                </template>
                <sub-menu v-if="!collapse" :subMenuData="secItem.secMenu"></sub-menu>
            </el-sub-menu>
        </template>
        <el-menu-item
            v-else
            @click="handleClick(secItem)"
            :index="splitPath(secItem.path)">
            <!--<component
                :is="secItem.sideBarIconName" 
                style="width: 1.3em; height: 1.3em; margin-right: 6px;">
            </component>-->
            <span v-if="!collapse">{{secItem.sideBarName}}</span>
        </el-menu-item>
    </template>
</template>
<script type="text/javascript">
    import { ref } from 'vue'
	export default{
        name:"sub-menu",
        props:{
            subMenuData:{
                type:Array,
                defalut : () => []
            },
            index:{
                type:String,
                default:""
            },
        },
		data () {
			return {
                collapse:false
			}
		},
		mounted (){
            
        },
        watch:{
            
        },
		components : {
			
		},
		methods : {
            handleClick(item){
                this.$router.push({ name: item.name })
            },
            splitPath(path){
                let pathArr = path.split("/");
                return pathArr.join("");
            },
            collapseMet(isCollapse){
                this.collapse = isCollapse;
            }
		},
	}
</script>
<style type="text/css" lang="less">
	.subMenuWrap{

    }
</style>